<template>
	<div
		class="login-container"
		v-if="visible">
		<div class="login-box">
			<!-- 标题区域 -->
			<div class="title-section">
				<h1>{{ step_details[step].title }}</h1>
				<p>{{ step_details[step].desc }}</p>
			</div>
			<!-- 登录表单 -->
			<el-form
				:model="login"
				label-width="auto"
				label-position="right"
				class="login-form"
				v-if="step == 0">
				<el-form-item>
					<el-input
						autocomplete="new-password"
						v-model="login.password"
						placeholder="请输入密码"
						type="password"
						@keydown.enter="login_click" />
				</el-form-item>
				<el-button
					class="next"
					type="primary"
					@click="login_click">
					登录
				</el-button>
			</el-form>
			<!-- 注册表单 -->
			<el-form
				:model="register"
				label-width="auto"
				label-position="right"
				class="login-form"
				v-if="step == 1">
				<el-form-item label="密码">
					<el-input
						autocomplete="new-password"
						v-model="register.password"
						placeholder="请输入密码"
						type="password" />
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input
						autocomplete="new-password"
						v-model="register.confirmPassword"
						show-password
						placeholder="请确认密码"
						type="password" />
				</el-form-item>
				<el-button
					class="next"
					:disabled="!(register.password && register.confirmPassword)"
					type="primary"
					@click="next">
					下一步
				</el-button>
			</el-form>
			<!-- 初始化安全问题 -->
			<el-form
				:model="register"
				label-width="auto"
				label-position="right"
				class="login-form"
				v-if="step == 2">
				<el-form-item>
					<el-select
						v-model="register.question_one"
						filterable
						allow-create
						default-first-option
						:reserve-keyword="false"
						placeholder="请输入问题1">
						<el-option
							v-for="item in options_one"
							:key="item.value"
							:label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input
						v-model="register.answer_one"
						placeholder="请输入答案1" />
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="register.question_two"
						filterable
						allow-create
						default-first-option
						:reserve-keyword="false"
						placeholder="请输入问题2">
						<el-option
							v-for="item in options_two"
							:key="item.value"
							:label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input
						v-model="register.answer_two"
						placeholder="请输入答案2" />
				</el-form-item>
				<el-button
					class="next"
					type="primary"
					@click="prev">
					上一步
				</el-button>
				<el-button
					class="next"
					type="primary"
					@click="register_click">
					注册
				</el-button>
			</el-form>
			<!-- 切换登录/注册 -->
			<div class="helper-links">
				<div @click="helper_click" v-if="step_details[step].helper">
					{{ step_details[step].helper }}
				</div>
				<div
					@click="forgot_click"
					v-if="step == 0">
					忘记密码
				</div>
			</div>

			<!-- 声明提示 -->
			<!-- <div class="disclaimer">
				<i class="fas fa-question-circle tooltip-trigger"></i>
				<div class="tooltip-content">
					密码是唯一解密凭证，丢失即数据不可用。
				</div>
			</div> -->
		</div>
	</div>
</template>
<script setup>
	import { ref, onBeforeMount } from "vue";
	import {
		encryptAnswer,
		encrypt,
		saveFile,
		delFile,
		getData,
		validateEncryptionFiles,
		areBuffersEqual
	} from "@/utils/encryption/index.js";
	import { my_message } from "@/utils/my_message/index.js";

	const msg = my_message();

	const step = ref(0); //0登录 1注册密码输入 2问题输入确认
	const step_details = [
		{
			title: "登录",
			desc: "请输入您的密码",
			// 只有初始化运行跳转注册，后续不能重复跳转
			// helper: "没有账号？立即注册",
		},
		{
			title: "初始化密码",
			desc: "请初始化您的密码与答案",
			helper: "已有账号？立即登录",
		},
		{
			title: "初始化安全问题",
			desc: "请输入您的答案",
			helper: "已有账号？立即登录",
		},
	];
	const options_one = [
		{
			value: 1,
			label: "你的出生地是？",
		},
		{
			value: 2,
			label: "你的第一只宠物叫什么？",
		},
		{
			value: 3,
			label: "你最喜欢的颜色是？",
		},
	];
	const options_two = [
		{
			value: 1,
			label: "你的小学名称是？",
		},
		{
			value: 2,
			label: "你的姓氏是？",
		},
		{
			value: 3,
			label: "你的手机尾号是？",
		},
	];
	const visible = ref(true);
	const login = ref({
		password: "",
	});
	const register = ref({
		password: "",
		confirmPassword: "",
		question_one: "",
		answer_one: "",
		question_two: "",
		answer_two: "",
	});

	onBeforeMount(async () => {
		const res = await validateEncryptionFiles();
		// 如果文件全部存在且值全部符合规则，直接登录
		if (res.allValid) {
			step.value = 0;
		} else {
			// 如果文件不存在或者不符合规则，跳转至注册
			step.value = 1;
		}
	});

	const login_click = () => {
		if (!login.value.password) {
			msg.msg_warning("请输入密码！");
			return;
		}
		const key = getData(null,"key");
		const pwd = getData(null,"pwd");
		const key_part = Buffer.from(key).subarray(0, 32);
		const iv_part = Buffer.from(key).subarray(32, 48);
		const current_pwd = encrypt(login.value.password,key_part,iv_part);
		if(areBuffersEqual(current_pwd,pwd)){
			visible.value = false;
			msg.msg_success("登录成功！");
		}else {
			msg.msg_warning("密码错误！");
		}
	};

	const next = () => {
		if (register.value.password !== register.value.confirmPassword) {
			msg.msg_warning("两次输入密码不一致！");
			return;
		}
		if (step.value == 1) {
			step.value = 2;
		}
	};
	const prev = () => {
		if (step.value == 2) {
			step.value = 1;
		}
	};
	const register_click = () => {
		if (register.value.question_one == "") {
			msg.msg_warning("请选择问题1！");
			return;
		}
		if (register.value.answer_one == "") {
			msg.msg_warning("请输入答案1！");
			return;
		}
		if (register.value.question_two == "") {
			msg.msg_warning("请选择问题2！");
			return;
		}
		if (register.value.answer_two == "") {
			msg.msg_warning("请输入答案2！");
			return;
		}
		const keyContent = encryptAnswer(
			register.value.answer_one,
			register.value.answer_two
		);
		if (!keyContent) {
			msg.msg_warning("答案加密失败！请联系管理员！");
			return;
		}
		const key_part = Buffer.from(keyContent).subarray(0, 32);
		const iv_part = Buffer.from(keyContent).subarray(32, 48);
		const encrypted_pwd = encrypt(
			register.value.confirmPassword,
			key_part,
			iv_part
		);
		if (!encrypted_pwd) {
			msg.msg_warning("密码加密失败！请联系管理员！");
			return;
		}
		let save_key = saveFile(null, keyContent, "key");
		let save_pwd = saveFile(null, encrypted_pwd, "pwd");
		if (save_pwd && save_key) {
			// 将问题存储到localStorage
			localStorage.setItem("question", {
				question_one: register.value.question_one,
				question_two: register.value.question_two,
			});
			// 初始化完成以后清除注册的所有弹框
			register.value = {
				password: "",
				confirmPassword: "",
				question_one: "",
				answer_one: "",
				question_two: "",
				answer_two: "",
			};
			step.value = 0;
			msg.msg_success("初始化设置成功！");
		} else {
			let del_key = delFile("key");
			let del_pwd = delFile("pwd");
			if (del_key && del_pwd) {
				msg.msg_warning("初始化设置失败,数据清理成功！");
			} else {
				msg.msg_warning("数据清理失败！请联系管理员！");
			}
		}
	};
	const helper_click = () => {
		if (step.value == 0) {
			step.value = 1;
		} else {
			step.value = 0;
		}
	};

	// validateEncryptionFiles()
</script>
<style scoped lang="less">
	.login-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(
			rgba(121, 187, 255, 0.4),
			rgba(121, 187, 255, 1)
		);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;

		.login-box {
			background: white;
			border-radius: 16px;
			padding: 32px;
			width: 448px;
			box-shadow: 0 12px 40px rgba(121, 187, 255, 0.5);
			text-align: center;

			.title-section {
				text-align: center;
				margin-bottom: 32px;

				h1 {
					font-size: 24px;
					font-weight: bold;
					color: #1f2937;
					margin-bottom: 8px;
				}

				p {
					color: #6b7280;
					font-size: 14px;
				}
			}
			.login-form {
				.next {
					width: 30%;
				}
				.register {
					width: 30%;
				}
			}

			.helper-links {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24px;
				padding-top: 16px;
				border-top: 1px solid #f3f4f6;
				cursor: pointer;

				div {
					font-size: 14px;
					color: rgb(121, 187, 255);
					text-decoration: none;

					&:hover {
						color: rgb(98, 175, 255);
					}
				}
			}

			.disclaimer {
				margin-top: 16px;
				font-size: 12px;
				color: #6b7280;
				text-align: center;
			}
		}
	}
</style>
